<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin">
      <q-card-section class="row items-center">
        <q-item-label class="text-h6">隐私电话</q-item-label>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>
      <q-separator />
      <q-card-section class="text-center">
        <div class="text-h6">该号码{{ data.expire }}后到期</div>
        <div class="text-blue text-h5 cursor-pointer" @click="onClickPhone">
          {{ data.phone }}
        </div>
      </q-card-section>
      <q-separator inset />
      <q-card-section class="text-center">
        <div class="text-subtitle1">您预留的电话</div>
        <div class="text-h6 text-blue q-py-sm">{{ data.servicePhone }}</div>
        <div class="text-red">请使用该电话进行拨号，否则将无法接通...</div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script>
import { useDialogPluginComponent, useQuasar } from "quasar";
import { fetchOrderCustomerInfo, getAxnNew } from "src/assets/fetch";
import { diffTime, parseCookie } from "src/assets/utils";
import { defineComponent, reactive } from "vue";

export default defineComponent({
  name: "ComponentsDialogsAddAccountDialogVue",
  emits: [...useDialogPluginComponent.emits],
  props: {
    chanceId: Number,
    customerId: Number,
    cookie: String,
  },
  setup(props) {
    const $q = useQuasar();
    const { dialogRef, onDialogHide, onDialogCancel } =
      useDialogPluginComponent();
    const data = reactive({
      phone: "",
      servicePhone: "",
      expire: "",
    });
    const cookie = parseCookie(props.cookie);

    fetchOrderCustomerInfo(props.customerId, cookie.string).then((res) => {
      if (res.data) {
        getAxnNew(
          {
            userId: cookie.data.userid,
            uniqid: cookie.data.uniqid,
            chanceId: props.chanceId,
            customerId: res.data.customerZbjId,
          },
          cookie.string
        ).then((res) => {
          if (!res.success) {
            $q.notify("获取电话失败");
            console.log(res);
            return;
          }
          data.phone = res.data.xnum;
          data.servicePhone = res.data.nnum;
          const expiration = diffTime(res.data.expiration);
          if (expiration.seconds) {
            data.expire = expiration.seconds + "秒";
          }
          if (expiration.minutes) {
            data.expire = expiration.minutes + "分钟";
          }
          if (expiration.hours) {
            data.expire = expiration.hours + "小时";
          }
          if (expiration.days) {
            data.expire = expiration.days + "天";
          }
        });
      }
    });

    return {
      data,
      dialogRef,
      onDialogHide,
      onCancelClick: onDialogCancel,
      onClickPhone() {
        console.log(data.phone);
      },
    };
  },
});
</script>
